<template>
  <div>
    <PageSearchTableWrappe>
      <template #search>
        <a-form layout="inline" :model="searchValue">
          <a-form-item>
            <a-range-picker
              :default-value="defaultDateRange"
              :format="dateFormat"
              @change="rangePickerChange"
            />
          </a-form-item>
          <a-form-item>
            <a-input v-model:value="searchValue.creator" allowClear placeholder="账号"> </a-input>
          </a-form-item>
          <a-form-item>
            <a-select v-model:value="searchValue.status" placeholder="选择状态" allowClear>
              <a-select-option value="1">成功</a-select-option>
              <a-select-option value="2">失败</a-select-option></a-select
            >
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSearch">查询 </a-button>
          </a-form-item>
        </a-form>
      </template>

      <template #table>
        <a-table :columns="columns" :data-source="data" :loading="dataLoading" :pagination="false">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'operation'">
              <span>
                <a @click="handleInfo(record)">详情</a>
              </span>
            </template>
          </template>
        </a-table>
        <Pagination
          v-show="total > 0"
          :total="total"
          v-model:page="searchValue.page"
          v-model:limit="searchValue.limit"
          @pagination="fetchData"
        />
      </template>
    </PageSearchTableWrappe>

    <BLogModal
      :openModal="openModal"
      :modalData="modalData"
      @handleModalOK="handleModalOK"
      @handleModalCancel="handleModalCancel"
    />
  </div>
</template>
<script lang="ts">
export default {
  name: 'BLog',
};
</script>
<script setup lang="ts">
import { ref, unref, onMounted, computed, h } from 'vue';
import { Tag, message } from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
import { getBLogListPage } from '/@/api/sys/monitor';
import { PageSearchTableWrappe } from '/@/components/Page';
import { Pagination } from '/@/components/Pagination';
import BLogModal from './BLogModal.vue';
import { formatToDateTime, formatToDate, getDate, dateUtil } from '/@/utils/dateUtil';

const columns = [
  {
    title: '账号',
    dataIndex: 'creator',
  },

  {
    title: '请求时间',
    dataIndex: 'createTime',
    customRender: ({ text }) => {
      return formatToDateTime(text);
    },
  },
  {
    title: '模块',
    dataIndex: 'title',
  },
  {
    title: 'ip',
    dataIndex: 'ip',
  },
  {
    title: '耗时(ms)',
    dataIndex: 'duration',
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 80,
    customRender: ({ record }) => {
      const status = record.status;
      const enable = ~~status === 1;
      const color = enable ? 'green' : 'red';
      const text = enable ? '成功' : '失败';
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    fixed: 'right',
    width: 120,
  },
];

const openModal = ref(false);
const modalData = ref({});
const dateFormat = 'YYYY-MM-DD';
const total = ref(0);
const data = ref([]);
const dataLoading = ref(false);
const defaultDateRange = [dateUtil(), dateUtil()];

const searchValue = ref({
  page: 1,
  limit: 10,
  starttime: dateUtil().format(dateFormat),
  endtime: dateUtil().format(dateFormat),
  name: '',
  loginuser: '',
  status: undefined,
});

const rangePickerChange = (date, dateStrings) => {
  searchValue.value.starttime = dateStrings[0];
  searchValue.value.endtime = dateStrings[1];
};
const fetchData = async () => {
  dataLoading.value = true;
  try {
    const res = await getBLogListPage(searchValue.value);
    data.value = res.items;
    total.value = res.records;
  } catch (e) {
    console.log(e);
  } finally {
    dataLoading.value = false;
  }
};
onMounted(() => {
  fetchData();
});

const handleSearch = () => {
  searchValue.value.page = 1;
  fetchData();
};

function handleInfo(record: Recordable) {
  openModal.value = true;
  modalData.value = record;
}

const handleModalOK = (result) => {
  openModal.value = false;
};

const handleModalCancel = () => {
  openModal.value = false;
};
</script>
